import {Avatar, Button, Card, Empty, Layout, Result, Space, Spin} from "antd";
import Form from "./Form";
import React from "react";
import {Content, Header} from "antd/es/layout/layout";
import {Footer} from "antd/es/modal/shared";

const headerStyle = {
    textAlign: 'center',
    color: '#fff',
    height: 64,
    paddingInline: 50,
    lineHeight: '64px',
    backgroundColor: '#9eb1be',
};
const contentStyle = {
    textAlign: 'center',
    minHeight: 120,
    lineHeight: '120px',
    color: '#fff',
    backgroundColor: '#108ee9',
};


class App extends React.Component {

    constructor(props) {
        super(props);
        this.state={
            status: "unsend",
            msg: ""
        }
    }

    setStatus = (status) => {
        this.setState({
            status: status
        })
    }

    setMessage = (msg) => {
        this.setState({
            msg: msg
        })
    }

    logout = () => {
        localStorage.removeItem("token");
        window.location.href = "/"
    }

    getResult = () => {
        if (this.state.status === "success") {
            return <div style={{ width: 500, maxHeight: 200, overflow: 'auto' }}>
                <Result
                    status="success"
                    title="成功发送"
                    subTitle={<pre>{this.state.msg}</pre>}
                />;
            </div>
        } else if (this.state.status === "sending"){
            return <>
                <Spin /></>
        } else if (this.state.status === "error"){
            return <>
                <div style={{width: 500}}>
                    <Result
                        status="error"
                        title="发送失败"
                    />;
                </div></>
        } else {
            return <>
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            </>
        }
    }

    render() {
        return(
            <>
                <Space direction="vertical" style={{ width: '100%', alignItems: 'center' }} size={[0, 48]}>
                    <Layout>
                        <Header style={headerStyle}>
                            <Avatar
                                style={{
                                    backgroundColor: '#fde3cf',
                                    color: '#f56a00',
                                }}
                            >
                                {localStorage.getItem("token").slice(0,3)}
                            </Avatar>
                            {localStorage.getItem("token")}
                            <Button type="primary" onClick={this.logout} danger>
                                退出登录
                            </Button>
                        </Header>
                        <Content style={contentStyle}>
                            <Card title={"发送邮件"}>
                                <Form setStatus={this.setStatus} setMsg = {this.setMessage}></Form>
                                <Card title={"发送日志"}>
                                    {this.getResult()}
                                </Card>
                            </Card>
                        </Content>
                    </Layout>
                </Space>

            </>
        )
    }

}

export default App;